<template>
  <view class="container">
    <HeadNav
      back
      title="问题反馈"
      bg="https://ucp-tcg.com:18001/mc/app/static/shnag_bg2.png"
      bgSize="cover"
    />
    <view class="form-box">
      <uni-forms
        ref="valiForm"
        :modelValue="valiFormData"
        :border="false"
        label-position="top"
        labelWidth="200px"
        :rules="rules"
      >
        <uni-forms-item label="请选择您遇到的问题类型" name="problemType">
          <uni-data-select
            v-model="valiFormData.problemType"
            :localdata="questionTypes"
            :clear="false"
          >
          </uni-data-select>
        </uni-forms-item>
        <uni-forms-item label="请详细描述您遇到的问题" name="problemContent">
          <uni-easyinput
            type="textarea"
            v-model.trim="valiFormData.problemContent"
            placeholder="请输入您的问题"
            maxlength="200"
            :inputBorder="false"
          />
        </uni-forms-item>
        <uni-forms-item label="您的姓名" name="userName">
          <uni-easyinput
            v-model.trim="valiFormData.userName"
            placeholder="请输入您的姓名"
            :inputBorder="false"
          />
        </uni-forms-item>
        <uni-forms-item label="您的联系方式" name="userContact">
          <uni-easyinput
            v-model.trim="valiFormData.userContact"
            placeholder="请输入您的联系方式"
            :inputBorder="false"
          />
        </uni-forms-item>
      </uni-forms>
    </view>
    <view class="button-bar">
      <view class="button-bar-btn" @tap="formSubmit"> 提交申请 </view>
    </view>
  </view>
</template>

<script setup>
import HeadNav from '@/components/HeadNav'
import { ref, reactive, computed } from 'vue'
import { problemApi } from '@/api/user'

const valiForm = ref(null)
const valiFormData = reactive({
  userName: '',
  problemType: 1,
  problemContent: '',
  userContact: ''
})

// 校验规则
const rules = reactive({
  problemType: {
    rules: [
      {
        required: true,
        errorMessage: '请选择您的问题类型'
      }
    ]
  },
  userName: {
    rules: [
      {
        required: true,
        errorMessage: '请输入您的姓名'
      }
    ]
  },
  problemContent: {
    rules: [
      {
        required: true,
        errorMessage: '请输入您的问题'
      }
    ]
  },
  userContact: {
    rules: [
      {
        required: true,
        errorMessage: '请输入您的联系方式'
      }
    ]
  }
})

const questionTypes = ref([
  {
    value: 1,
    text: '系统'
  }
])

const formSubmit = () => {
  valiForm.value
    .validate()
    .then(async res => {
      // console.log('success', res);
      // uni.showToast({
      // 	title: `校验通过`
      // })
      uni.showLoading({
        title: '正在提交...',
        mask: true
      })
      await problemApi(valiFormData)
      uni.hideLoading()
      uni.showToast({
        icon: 'success',
        title: '提交成功',
        success: () => {
          valiForm.value.clearValidate()
          valiFormData.userName = ''
          valiFormData.problemContent = ''
          valiFormData.userContact = ''
        }
      })
    })
    .catch(err => {
      console.log('err', err)
    })
}
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  background-color: #ebebeb;
  font-family: PingFangSC-Regular, sans-serif;
  position: relative;
}

.form-box {
  padding: 40rpx;
  box-sizing: border-box;
}

.button-bar {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;
  bottom: calc(50rpx + env(safe-area-inset-bottom));

  .button-bar-btn {
    font-family: PingFangSC-Regular, sans-serif;
    background-color: #bb9f5e;
    color: #fff;
    font-size: 28rpx;
    padding: 16rpx 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    border-radius: 12rpx;
    letter-spacing: 2rpx;
    background-image: url('https://ucp-tcg.com:18001/mc/app/static/tabbg-l.png');
    background-repeat: no-repeat;
    background-size: contain;
  }
}

::v-deep .uni-stat__select .uni-stat-box {
  background-color: #e3e3e3;
  // border-color: #189BFA;
  // border-radius: 16rpx;
  // text-align: center;

  // .uni-select__input-text {
  // 	color: #189BFA;
  // }

  // .uni-icons.uniui-bottom {
  // 	color: #189BFA !important;
  // }
}

::v-deep .uni-forms-item__content .uni-easyinput__content {
  background-color: #e3e3e3 !important;
}

::v-deep .uni-forms-item__error {
  font-size: 28rpx;
}

::v-deep .uni-easyinput__content-textarea {
  padding-left: 20rpx;
}
</style>
